<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>skew() 方法</title>
    <style>
        /* skew() 方法 */
        /* 语法 */
        /* transform:skew(<angle> [,<angle>]); */
        /* 包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。 */

        /* skewX(<angle>);表示只在X轴(水平方向)倾斜。 */
        /* skewY(<angle>);表示只在Y轴(垂直方向)倾斜。 */
        div {
            width: 100px;
            height: 75px;
            background-color: red;
            border: 1px solid black;
        }

        /* skew(30deg,20deg) 元素在X轴和Y轴上倾斜20度30度。 */
        div#div2 {
            transform: skew(30deg, 20deg);
            /* IE 9 */
            -ms-transform: skew(30deg, 20deg);
            /* Safari and Chrome */
            -webkit-transform: skew(30deg, 20deg);
        }
    </style>
</head>

<body>

    <div>Hello. This is a DIV element.</div>

    <div id="div2">Hello. This is a DIV element.</div>

</body>

</html>